<template>
  <div class="search">
    <nav v-if="$route.name=='search-details'" class="navs">
      <div class="navs-wrap">
        <div v-for="item in nav" :key="item.name" class="navs-item" :class="{navsActive : active === item.name}" @click="navTab(item.banner_id,true)">
          {{ item.name }}
        </div>
      </div>
    </nav>
    <div v-customLoading="loading" class="search-content">
      <div class="search-content-wrap">
        <!-- 问答 -->
        <div v-if="active=='问答'">
          <div v-if="datas.Answer.length" class="answer-list-box">
            <div v-for="item in datas.Answer" :key="item.content_id" class="answer-list-item">
              <AnswerSearchList :question-data="item" />
            </div>
            <PagerTwo :page-config="pageConfig" @changeCurrentPage="changeCurrentPage" />
          </div>
          <div v-if="datas.Answer.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
        <!-- 文章 -->
        <div v-if="active=='文章'">
          <div v-if="datas.Article.length">
            <div class="aticle-list-content">
              <VueWaterfall :datas="datas.Article" />
            </div>
            <Pager :page-config="pageConfig" :home-tab-name="active" @changeCurrentPage="changeCurrentPage" />
          </div>
          <div v-if="datas.Article.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
        <!-- 百科 -->
        <div v-if="active=='百科'">
          <div v-if="datas.Encyclopedias.length" calss="encyclopedias-list" :style="{margin:'10px'}">
            <div v-for="item in datas.Encyclopedias" :key="item.wiki_id">
              <EncyclopediasList :encyclopedias="item" />
            </div>
          </div>
          <div v-if="datas.Encyclopedias.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
        <!-- 日记 -->
        <div v-if="active=='日记'">
          <div v-if="datas.Diary.length">
            <div class="diary-content">
              <div class="diary-content-wrap">
                <div v-for="item in datas.Diary" :key="item.diary_group_id" class="diary-content-item">
                  <diaryCoverList :datas="item" />
                </div>
              </div>
              <Pager :page-config="pageConfig" :home-tab-name="active" @changeCurrentPage="changeCurrentPage" />
            </div>
          </div>
          <div v-if="datas.Diary.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
        <!-- 动态 -->
        <div v-if="active=='动态'">
          <div v-if="datas.Moment.length">
            <div class="aticle-list-content">
              <VueWaterfall :datas="datas.Moment" />
            </div>
            <Pager :page-config="pageConfig" :home-tab-name="active" @changeCurrentPage="changeCurrentPage" />
          </div>
          <div v-if="datas.Moment.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
        <!-- 商品 -->
        <div v-if="active=='商品'" class="product-filter">
          <AreaScreen :father-active="city" @city="getCity" />
        </div>
        <div v-if="active=='商品'">
          <div v-if="datas.Product.length">
            <div class="product-list-content">
              <div class="product-list-title">
                <div v-for="item in sortData" :key="item.name" class="product-list-orderBy" :class="{'productActive':productActive===item.name}" @click="orderBy(item)">
                  {{ item.name }}
                </div>
              </div>
              <div class="product-list-content-wrap">
                <div v-for="item in datas.Product" :key="item.product_id" class="product-list-content-item">
                  <ProjectList :project-data="item" />
                </div>
              </div>
            </div>
            <Pager :page-config="pageConfig" :city="city" :order-field="orderField" @changeCurrentPage="changeCurrentPage" />
          </div>
          <div v-if="datas.Product.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
        <!-- 医生 -->
        <div v-if="active=='医生'">
          <AreaScreen :father-active="city" @city="getCity" />
        </div>
        <div v-if="active=='医生'">
          <div v-if="datas.Doctor.length" class="doctor-list-content-left">
            <div class="doctor-list-title">
              <div v-for="item in doctorSort" :key="item.name" class="doctor-list-orderBy" :class="{'doctorActive':doctorActive===item.name}" @click="doctorOrderByClick(item)">
                {{ item.name }}
              </div>
            </div>
            <div class="doctor-list-content-left-item-wrap">
              <div v-for="item in datas.Doctor" :key="item.user_id" class="doctor-list-content-left-item">
                <Doctor :doctor-data="item" />
              </div>
            </div>
            <PagerTwo :page-config="pageConfig" :city="city" @changeCurrentPage="changeCurrentPage" />
          </div>
          <div v-if="datas.Doctor.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>

        <!-- 医院 -->
        <div v-if="active=='医院'">
          <AreaScreen :father-active="city" @city="getCity" />
        </div>
        <div v-if="active=='医院'">
          <div v-if="datas.Hospital.length" class="hospital-list-content">
            <div class="hospital-list-content-left">
              <div class="hospital-list-title">
                <div v-for="item in doctorSort" :key="item.name" class="hospital-list-orderBy" :class="{'hospitalActive':hospitalActive===item.name}" @click="hospitalOrderByClick(item)">
                  {{ item.name }}
                </div>
              </div>
              <div class="hospital-list-content-item-box">
                <div v-for="item in datas.Hospital" :key="item.user_id" class="hospital-list-content-item">
                  <Hospital :hospital-datas="item" />
                </div>
                <PagerTwo :page-config="pageConfig" :city="city" @changeCurrentPage="changeCurrentPage" />
              </div>
            </div>
          </div>
          <div v-if="datas.Hospital.length===0" class="hospital-noData">
            <div class="hospital-noData-content">
              <img src="~assets/img/no-date.png" alt="">
              <div class="hospital-noData-content-text">
                这里什么都没有~
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAnswerSearch, getArticleSearch, getSearchDiary, getEncyclopediasSearch, getMomentSearch, getSearchProduct, getSearchDoctor, getSearchHospital } from '@/api/searchDetails'
import AnswerSearchList from '@/components/answerSearchList'
import VueWaterfall from '@/components/VueWaterfall'
import diaryCoverList from '@/components/diaryCoverList'
import AreaScreen from '@/components/areaScreen'
import ProjectList from '@/components/projectList'
import Doctor from '@/components/doctorSearchList'
import Hospital from '@/components/hospitalSearchList'
import EncyclopediasList from '@/components/encyclopediasSearchList'
import Pager from '@/components/pager'
import PagerTwo from '@/components/pagerTwo'
export default {
  components: {
    AnswerSearchList,
    VueWaterfall,
    diaryCoverList,
    AreaScreen,
    ProjectList,
    Doctor,
    EncyclopediasList,
    Pager,
    PagerTwo,
    Hospital
  },
  props: {

  },
  data() {
    return {
      nav: [
        {
          name: '商品',
          banner_id: 'Product'
        },
        {
          name: '文章',
          banner_id: 'Article'
        }, {
          name: '百科',
          banner_id: 'Encyclopedias'
        }, {
          name: '日记',
          banner_id: 'Diary'
        }, {
          name: '动态',
          banner_id: 'Moment'
        },
        {
          name: '问答',
          banner_id: 'Answer'
        }, {
          name: '医生',
          banner_id: 'Doctor'
        }, {
          name: '医院',
          banner_id: 'Hospital'
        }
      ],
      datas: {
        Answer: [],
        Article: [],
        Encyclopedias: [],
        Diary: [],
        Moment: [],
        Product: [],
        Doctor: [],
        Hospital: []
      },
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        pageTotal: 0
      },
      sortData: [
        {
          name: '智能排序',
          orderBy: 'intelligent'
        }, {
          name: '销量最多',
          orderBy: 'place_count'
        }, {
          name: '案例最多',
          orderBy: 'diary_group_count'
        }, {
          name: '价格最高',
          orderBy: 'selling_price_desc'
        }, {
          name: '价格最低',
          orderBy: 'selling_price_asc'
        }
      ],
      productActive: '智能排序',
      orderField: 'intelligent',
      city: '',
      area: {
        user_area: '',
        user_business: ''
      },
      doctorSort: [
        {
          name: '智能排序',
          orderBy: 'intelligent'
        }, {
          name: '销量最多',
          orderBy: 'user_statistic.order_create'
        }, {
          name: '满意度',
          orderBy: 'user_statistic.satisfaction'
        }, {
          name: '咨询量',
          orderBy: 'conversation_total'
        }, {
          name: '案例数',
          orderBy: 'case'
        }, {
          name: '预约数',
          orderBy: 'place_total'
        }
      ],
      doctorOrderBy: 'intelligent',
      doctorActive: '智能排序',
      hospitalActive: '智能排序',
      hospitalorderBy: 'intelligent',
      active: '',
      page: 1,
      loading: true
    }
  },
  computed: {

  },
  watch: {
  },
  created() {

  },
  mounted() {
    this.active = localStorage.getItem('activeName') ? localStorage.getItem('activeName') : '商品'
    this.navTab(localStorage.getItem('activeId') ? localStorage.getItem('activeId') : 'Product', true)
  },
  methods: {
    navTab(i, isTab) {
      this.loading = true
      if (isTab) {
        this.page = 1
        switch (i) {
          case 'Answer':
            this.active = '问答'
            getAnswerSearch(this.$route.params.details, this.page, 5).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.pageConfig.pageNo = 1
              this.Exclusive(i)
            })
            break
          case 'Article':
            this.active = '文章'
            getArticleSearch(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.pageConfig.pageNo = 1
              this.Exclusive(i)
            })
            break
          case 'Encyclopedias':
            this.active = '百科'
            getEncyclopediasSearch(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.pageConfig.pageNo = 1
              this.Exclusive(i)
            })
            break
          case 'Diary':
            this.active = '日记'
            getSearchDiary(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.pageConfig.pageNo = 1
              this.Exclusive(i)
            })
            break
          case 'Moment':
            this.active = '动态'
            getMomentSearch(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.pageConfig.pageNo = 1
              this.Exclusive(i)
            })
            break
          case 'Product':
            this.active = '商品'
            this.area.user_area = this.city
            if (this.area.user_area !== '') {
              getSearchProduct(this.$route.params.details, this.page, 12, this.orderField, JSON.stringify(this.area)).then(res => {
                this.datas[i] = res.data
                this.pageConfig.total = res.meta.total
                this.pageConfig.pageTotal = res.meta.last_page
                this.pageConfig.pageNo = 1
                this.Exclusive(i)
              })
            } else {
              getSearchProduct(this.$route.params.details, this.page, 12, this.orderField).then(res => {
                this.datas[i] = res.data
                this.pageConfig.total = res.meta.total
                this.pageConfig.pageTotal = res.meta.last_page
                this.pageConfig.pageNo = 1
                this.Exclusive(i)
              })
            }
            break
          case 'Doctor':
            this.active = '医生'
            this.area.user_area = this.city
            if (this.area.user_area !== '') {
              getSearchDoctor(this.$route.params.details, this.page, 4, this.doctorOrderBy, JSON.stringify(this.area)).then(res => {
                this.datas[i] = res.data
                this.pageConfig.total = res.meta.total
                this.pageConfig.pageTotal = res.meta.last_page
                this.pageConfig.pageNo = 1
                this.Exclusive(i)
              })
            } else {
              getSearchDoctor(this.$route.params.details, this.page, 4, this.doctorOrderBy).then(res => {
                this.datas[i] = res.data
                this.pageConfig.total = res.meta.total
                this.pageConfig.pageTotal = res.meta.last_page
                this.pageConfig.pageNo = 1
                this.Exclusive(i)
              })
            }
            break
          case 'Hospital':
            this.active = '医院'
            this.area.user_area = this.city
            if (this.area.user_area !== '') {
              getSearchHospital(this.$route.params.details, this.page, 4, this.hospitalOrderBy, JSON.stringify(this.area)).then(res => {
                this.datas[i] = res.data
                this.pageConfig.total = res.meta.total
                this.pageConfig.pageTotal = res.meta.last_page
                this.pageConfig.pageNo = 1
                this.Exclusive(i)
              })
            } else {
              getSearchHospital(this.$route.params.details, this.page, 4, this.hospitalOrderBy).then(res => {
                this.datas[i] = res.data
                this.pageConfig.total = res.meta.total
                this.pageConfig.pageTotal = res.meta.last_page
                this.pageConfig.pageNo = 1
                this.Exclusive(i)
              })
            }
            break
        }
      } else {
        switch (i) {
          case 'Answer':
            this.active = '问答'
            getAnswerSearch(this.$route.params.details, this.page, 5).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              // this.pageConfig.pageNo = 1
              this.Exclusive(i)
            })
            break
          case 'Article':
            this.active = '文章'
            getArticleSearch(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.Exclusive(i)
            })
            break
          case 'Encyclopedias':
            this.active = '百科'
            getEncyclopediasSearch(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.datas
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.Exclusive(i)
            })
            break
          case 'Diary':
            this.active = '日记'
            getSearchDiary(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.Exclusive(i)
            })
            break
          case 'Moment':
            this.active = '动态'
            getMomentSearch(this.$route.params.details, this.page, 12).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.Exclusive(i)
            })
            break
          case 'Product':
            this.active = '商品'
            getSearchProduct(this.$route.params.details, this.page, 12, this.orderField).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.Exclusive(i)
            })
            break
          case 'Doctor':
            this.active = '医生'
            getSearchDoctor(this.$route.params.details, this.page, 4, this.doctorOrderBy).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.Exclusive(i)
            })
            break
          case 'Hospital':
            this.active = '医院'
            getSearchHospital(this.$route.params.details, this.page, 4, this.hospitalOrderBy).then(res => {
              this.datas[i] = res.data
              this.pageConfig.total = res.meta.total
              this.pageConfig.pageTotal = res.meta.last_page
              this.Exclusive(i)
            })
            break
        }
      }
      localStorage.setItem('activeName', this.active)
      localStorage.setItem('activeId', i)
    },
    // 排他函数
    Exclusive(key) {
      this.loading = false
      for (const i in this.datas) {
        if (i !== key) {
          this.datas[i] = ''
        }
      }
    },
    changeCurrentPage(page) {
      this.pageConfig.pageNo = page
      this.page = page
      for (const i in this.datas) {
        if (this.datas[i].length) {
          this.navTab(i, false)
        }
      }
    },
    orderBy(i) {
      this.productActive = i.name
      this.orderField = i.orderBy
      if (this.active === '商品') {
        this.navTab('Product', true)
      }
    },
    getCity(city) {
      this.city = city
      if (this.active === '商品') {
        this.navTab('Product', true)
      } else if (this.active === '医生') {
        this.navTab('Doctor', true)
      } else if (this.active === '医院') {
        this.navTab('Hospital', true)
      }
    },
    doctorOrderByClick(i) {
      this.doctorActive = i.name
      this.doctorOrderBy = i.orderBy
      if (this.active === '医生') {
        this.navTab('Doctor', true)
      }
    },
    hospitalOrderByClick(i) {
      this.hospitalActive = i.name
      this.hospitalOrderBy = i.orderBy
      if (this.active === '医院') {
        this.navTab('Hospital', true)
      }
    }
  },
  head() {
    return {
      title: '容猫美容整形—整形·微整形·激光美肤·牙齿美容人气整形社区、整形点评、整形特卖平台',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '容猫是一款高人气医美网站和手机App,提供关于整形,微整形,激光美肤,牙齿美容的社区,点评和线上特卖,平台有5000家整形医院和近万名整形医生信息,覆盖中国大陆,韩国,日本,台湾等国家和地区'
        }, {
          name: 'keywords', content: '容猫,容猫美丽社区,美丽社区,健康,整形,韩国,微整形,美丽,年轻,减肥,医疗,韩国整形,医疗旅游,整形论坛,整容'
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.navs {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 1);
  margin-top: 30px;
  .navs-wrap {
    width: 1190px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .navs-item {
    width: 132px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }
  .navs-item:hover {
    cursor: pointer;
  }
  .navsActive {
    color: #504cff;
    border-bottom: 4px solid;
    border-image: linear-gradient(#435cff, #9780ff) 60 60;
  }
}
.search-content {
  width: 100%;
  background: rgba(246, 246, 246, 1);
  .search-content-wrap {
    width: 1190px;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 20px;
  }
}
.answer-list-box {
  width: 100%;
  background: #fff;
  margin-top: 10px;
  border-radius: 4px;
  padding: 20px;
}
.diary-content-wrap {
  display: flex;
  flex-wrap: wrap;
}
.diary-content-item {
  margin-right: 7px;
}
.product-filter {
  margin-top: 10px;
}
.product-list-content {
  width: 1190px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-top: 10px;
  padding: 0 10px;
  overflow: hidden;
  .product-list-title {
    display: flex;
    margin-left: 30px;
    margin-top: 14px;
    .product-list-orderBy {
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      margin-right: 50px;
    }
    .product-list-orderBy:hover {
      cursor: pointer;
    }
    .productActive {
      color: rgba(80, 76, 255, 1);
    }
  }
  .product-list-content-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    .product-list-content-item {
      margin-left: 7px;
    }
  }
}
.doctor-list-title {
  display: flex;
  margin-left: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .doctor-list-orderBy {
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    margin-right: 50px;
  }
  .doctorActive {
    color: rgba(80, 76, 255, 1);
  }
  .doctor-list-orderBy:hover {
    cursor: pointer;
  }
}

.doctor-list-content-left {
  background: #fff;
  padding-bottom: 30px;
  padding-top: 14px;
  margin-top: 10px;
  .doctor-list-content-left-item-wrap {
    margin-top: 14px;
  }
}
.hospital-list-content {
  display: flex;
  margin-top: 10px;
  .hospital-list-content-left {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    padding: 10px 0px 30px;
    .hospital-list-content-item:hover {
      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    }
    .hospital-list-content-item-box {
      margin-top: 14px;
    }
    .hospital-list-content-item {
      width: 100%;
      padding: 8px 10px;
    }
  }
  .hospital-list-title {
    display: flex;
    margin-left: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .hospital-list-orderBy {
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      margin-right: 50px;
    }
    .hospitalActive {
      color: rgba(80, 76, 255, 1);
    }
    .hospital-list-orderBy:hover {
      cursor: pointer;
    }
  }
}
.hospital-noData {
  width: 1190px;
  height: 790px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  margin-top: 10px;
  position: relative;
  .hospital-noData-content {
    width: 242px;
    height: 210px;
    position: absolute;
    left: 50%;
    top: 150px;
    margin-left: -121px;
    > img {
      width: 242px;
      height: 191px;
    }
    .hospital-noData-content-text {
      font-size: 14px;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 20px;
      text-align: center;
    }
  }
}
</style>
